import React, { Component } from 'react'
import { Text, StyleSheet, View, TextInput, ScrollView, TouchableOpacity } from 'react-native'
import handleChange from '../../utils/GetLocation'
import NavBar from '../../components/PublicHeader';
import { GetLocation } from '../../utils/GetLocation'
import Loading from '../../components/Loading';

export default class addPosition extends Component {
  constructor(props) {
    super(props)
    this.state = {
      topTitle: "添加位置",
      inputPlaceholder: "搜索位置",
      //地址列表
      datas: [],
      datas2: [],
      latitude: '',
      longitude: '',
      positions: '',
    }
  }

  componentDidMount = () => {
    Loading.show()
    this.location()
  }

  // 获取地理定位，周边地名
  async location() {
    await GetLocation();
    setTimeout(() => {
      if (Object.keys(GetLocation()._55).length > 0) {
        this.setState({
          positions: GetLocation()._55.positions.pois
        })
        this.setState({
          datas: this.state.positions,
          datas2: this.state.positions,
        })
        console.log('@@@@@@@@@@@@@@@');
        console.log(this.state.datas2);
      } else {
        alert("获取地址失败，请重新进入系统！")
      }
      Loading.hide()
    }, 3000)
  }

  submit(item) {
    // 传数据给父页面
    this.props.navigation.state.params.callBack(item)
    this.props.navigation.goBack()
  }

  // 搜索
  search(value) {
    let arr = this.state.datas.filter(item => {
      return item.name.indexOf(value) > -1
    })
    this.setState({
      datas2: arr
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Loading />
        {/* 头部组件 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={"#333"}
        />

        {/* 搜索input框 */}
        <TextInput onChangeText={(value) => {
          this.search(value)
        }} placeholder={this.state.inputPlaceholder} style={styles.position_search} />

        {/* 地址遍历 */}
        <ScrollView>
          <View style={styles.marlr}>
            {this.state.datas2.map((item, index) => (
              <TouchableOpacity key={index} style={styles.ItemBox} onPress={() => {
                // this.props.navigation.navigate("publish")
                this.submit(item)
              }} >

                <View>
                  <Text style={styles.address}>
                    {item.name}
                  </Text>
                </View>

                <View style={styles.row}>
                  <Text numberOfLines={1} ellipsizeMode={'tail'} style={styles.detailed}>
                    {item.address}
                  </Text>
                  <Text style={styles.distance}>
                    {parseInt(item.distance) + 'm'}
                  </Text>
                </View>

              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>

      </View >
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, backgroundColor: "#fff"
  },
  marlr: {
    marginLeft: 15,
    marginRight: 15,
  },
  ItemBox: {
    flexDirection: 'column',
    justifyContent: "center",
    height: 80,
    // marginTop: 20,
    // paddingBottom: 20,
    borderBottomWidth: 1,
    borderBottomColor: "rgba(0, 0, 0, 0.08)"
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  address: {
    fontSize: 20,
    marginBottom: 5
  },
  detailed: {
    color: "rgba(0, 0, 0, 0.3)",
    width: 300
  },
  position_search: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    margin: 15,
    height: 40,
    textAlign: "center",
    backgroundColor: "#f0f0f0"
  }
})
